/**
 * Created by Administrator on 2016/11/9.
 */
function addEvent(element,event,handle){
    if(element.addEventListener){
        element.addEventListener(event,handle,false);
    }else if(element.attachEvent){
        element.attachEvent('on' + event,handle);
    }else{
        element['on' + event] = handle;
    }
}
//生成随机数
function scoreRandom(num){
    var arr = [];
    var sum = 0;
    for(var i = 0;i < num;i++){
        arr[i] = Math.floor(Math.random() * 41 + 60);
        sum += arr[i];
    }
    arr.push(sum);
    return arr;
}

var th_name = ['姓名','语文','数学','英语','总分'];
var scoreData = {
    '老大':scoreRandom(3),
    '老二':scoreRandom(3),
    '老三':scoreRandom(3),
    '老四':scoreRandom(3),
    '老五':scoreRandom(3),
    '老六':scoreRandom(3),
    '老七':scoreRandom(3),
    '老八':scoreRandom(3),
    '老九':scoreRandom(3),
    '老十':scoreRandom(3),
    '十一':scoreRandom(3),
    '十二':scoreRandom(3),
    '十三':scoreRandom(3),
    '十四':scoreRandom(3)
};


var scoreData1 = {
    '大毛':scoreRandom(3),
    '二毛':scoreRandom(3),
    '三毛':scoreRandom(3),
    '四毛':scoreRandom(3),
    '五毛':scoreRandom(3),
    '六毛':scoreRandom(3),
    '七毛':scoreRandom(3),
    '八毛':scoreRandom(3),
    '九毛':scoreRandom(3),
    '十毛':scoreRandom(3)
    };
var scoreFn = function(tdNum,names){
    this.content = document.querySelector('.content');
    this.table = document.createElement('table');
    this.freeze_div = document.createElement('div');
    this.name = names;
    this.tableData = tdNum;
    this.init();
}

scoreFn.prototype = {
    init:function(){
        this.createTable();
        this.createFlag();
        var _this = this;
        var up = document.getElementsByClassName("UpDiv");
        var down = document.getElementsByClassName("DownDiv");
        this.freeze();
    },
    //动态生成表格
    createTable : function(){
        var name_len = this.name.length;
        var td_len = this.tableData.length;
        var thHtml = '';
        this.table.className = 'table';
        var tr_th = document.createElement('tr');
        var freeze_th = document.createElement('tr');
        var table = document.createElement('table');
        table.className = 'table';
        this.freeze_div.className = "freeze_th";
        for(var i = 0;i<name_len;i++){
            thHtml += "<th class='th'>"+this.name[i]+"</th>";
        }
        tr_th.innerHTML = thHtml;
        freeze_th.innerHTML = thHtml;
        this.table.appendChild(tr_th);
        table.appendChild(freeze_th);
        this.freeze_div.appendChild(table);
        this.content.appendChild(this.freeze_div);
        for(var key in this.tableData){
            var td_tr = document.createElement('tr');
            var tdHtml = "<td>"+key+"</td>";
            for(var j = 0;j<this.tableData[key].length;j++){
                tdHtml += "<td>"+this.tableData[key][j]+"</td>"
            }
            td_tr.innerHTML = tdHtml;
            this.table.appendChild(td_tr);
        }
        this.content.appendChild(this.table);
    },
    //排序函数，冒泡排序
    sortScore:function(number,flag){
        var n = 0;
        for(var key in this.tableData) {
            n++;
        }
        var num = new Array(n);
        var n = 0;
        for(var key in this.tableData) {
            num[n] = new Array(this.tableData[key].length);
            num[n][0] = key;
            for (var i = 0; i < this.tableData[key].length; i++) {
                num[n][i+1] = this.tableData[key][i];
            }
            n++;
        }
        var len = num.length;
        for(var i = 0;i<len;i++){
            for(var j = len-1;j>0;j--){
                if(flag){
                    if(num[j][number] > num[j-1][number] && i != j ){
                        var temp = num[j];
                        num[j] = num[j-1];
                        num[j-1] = temp;
                    }
                }else{
                    if(num[j][number] < num[j-1][number] && i != j ){
                        var temp = num[j];
                        num[j] = num[j-1];
                        num[j-1] = temp;
                    }
                }


            }
        }
        var tds = [];
        for(var i = 1;i<this.table.children.length;i++){
            for(var j = 0;j<this.table.children[i].children.length;j++){
                tds[(i-1)*(this.table.children[i].children.length)+j] = this.table.children[i].children[j];
            }
        }
        for(var m = 0;m < len;m++){
            for(var n = 0;n < this.name.length;n++){
                tds[m*(this.name.length) + n].innerHTML = num[m][n];
            }
        }

    },
//排序小三角的创建和绑定排序函数
    createFlag:function(){
        var ths = this.table.children[0].children;
        var ths1 = this.freeze_div.children[0].children[0].children;
        var _this = this;
        for(var i = 1;i<ths.length;i++){
                var myDivUp = document.createElement('div');
                var myDivUp1 = document.createElement('div');
                myDivUp.dataset.num = i;
                myDivUp1.dataset.num = i;
                var myDivDown = document.createElement('div');
                var myDivDown1 = document.createElement('div');
                myDivDown.dataset.num = i;
                myDivDown1.dataset.num = i;
                myDivUp.className = 'UpDiv';
                myDivUp1.className = 'UpDiv';
                myDivDown.className = 'DownDiv';
                myDivDown1.className = 'DownDiv';
                ths[i].appendChild(myDivUp);
                ths[i].appendChild(myDivDown);
                ths1[i].appendChild(myDivUp1);
                ths1[i].appendChild(myDivDown1);
                var n = i;
                addEvent(myDivUp,'click',function(){

                    _this.sortScore(this.dataset.num,false);
                });
                addEvent(myDivDown,'click',function(){
                    _this.sortScore(this.dataset.num,true);
                });
                addEvent(myDivUp1,'click',function(){

                    _this.sortScore(this.dataset.num,false);
                });
                addEvent(myDivDown1,'click',function(){
                    _this.sortScore(this.dataset.num,true);
                });

        }

    },
    //冻结表头函数
    freeze:function(){
        var ths = this.table.children[0];
        var distance = this.table.offsetTop;
        var _this = this;
        addEvent(window,'scroll',function(){
            if(document.body.scrollTop < distance){
                ths.style.display = 'table-row';
                _this.freeze_div.style.display = 'none';
            }else if(document.body.scrollTop >= distance && document.body.scrollTop <= distance+_this.table.offsetHeight-11){
                _this.freeze_div.style.display = 'block';
                _this.freeze_div.style.top = '0px';
                ths.style.display = 'none';
            }else if(document.body.scrollTop > distance+_this.table.offsetHeight-11){
                _this.freeze_div.style.display = 'none';
                ths.style.display = 'table-row';
            }
        })

    }

}
var table = new scoreFn(scoreData,th_name);
var table1 = new scoreFn(scoreData1,th_name);
